<template >
	<div class="p_Login_mima">
		<div class="p_Login_Return">
			<a href="javascript:history.back(-1)"><img src="../../assets/login/返回.png" /></a>
			<span>忘记密码</span>
		</div>
		<div class="p_Login_mima_zhaohui">
			<p>仅限手机号已经验证或手机号注册用户找回密码</p>
			<span class="p_Login_input1">
       		<input type="text" placeholder="请输入手机号" v-model="arr"/>
       	</span>
			<span class="p_Login_input1">
       		<input type="text" placeholder="请在次输入手机号"  v-model="brr"/>
       	</span>
			<span class="p_Login_input2">
       		<input type="text" placeholder="请输入短信验证码" v-model="crr"/>
       	</span>
			<button class="p_Login_yanzheng" @click="gethuoqu()">获取验证码</button>
			<span class="p_Login_number" ref='aa'>验证码是: <em></em></span>
			<a id="getchongzhi" @click="getchongzhi"><button class="p_Login_xiayibu">下一步</button></a>
		</div>
	</div>
</template>

<script>
	
	export default {
		name: "zhaohuimima",
		data() {
			return {
				arr: "",
				brr: "",
				crr:"",
				href:"#/chongzhi",
			}
		},
		methods: {
			gethuoqu: function() {
				var arr1 = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
				if(!arr1.test(this.arr)) {
					console.log("请输入正确的手机号")
				} else {
					if(this.arr == this.brr) {
						$(".p_Login_number").css("display", "block")
					}else{
						console.log("两次手机号输入不一致");
					}
				}
			},
			getchongzhi:function(){
				var _this = this;
				this.axios.get('http://localhost:3000/router/chaxun', {
							params: {
								phone: _this.arr,
								condition: _this.sql.user.chaxun,
								
							}
					}).then(function(res){
						res.config.params.phone= _this.phone
							if(res.data.length!=0 &&_this.crr==_this.$refs.aa) {
								window.location.href =_this.href+"/"+_this.arr;
							}else{
								console.log('验证码输入错误或者 手机号错误')
							}
						})
			}
		},
		mounted() {
			var _this = this;
			$(function() {
				var r = ranmun(0, 9);
				var g = ranmun(0, 9);
				var c = ranmun(0, 9);
				var d = ranmun(0, 9);
				var str = r + " " + g + " " + c + " " + d;
				$(".p_Login_number em").html(str);
                _this.$refs.aa = str ;
				function ranmun(a, b) {
					return Math.floor(Math.random() * (b - a + 1) - a);
				}

			})
		}
	}
</script>

<style scoped>
	.p_Login_mima {
		width: 100%;
	}
	
	.p_Login_Return img {
		width: 10%;
		margin: 2%;
	}
	
	.p_Login_Return span {
		display: inline-block;
		margin-left: 5rem;
		width: 50%;
		vertical-align: 1rem;
		font-size: 2rem;
	}
	
	.p_Login_mima_zhaohui {
		width: 80%;
		margin: auto;
	}
	
	.p_Login_mima_zhaohui p {
		margin: 5% 0%;
		display: inline-block;
		font-size: 1.5rem;
		color: #FF9A19;
	}
	
	.p_Login_input1 input {
		margin-left: 30px;
		border: none;
		outline: none;
		width: 92%;
		height: 20px;
		color: #999;
		font-size: 1.5rem;
	}
	
	.p_Login_input1 {
		margin: 5% auto;
		display: block;
		padding-bottom: 3%;
		border-bottom: 1px solid #999;
		background: url(../../assets/login/手机.png)no-repeat;
		background-size: 1.8rem 1.8rem;
		margin-bottom: 10%;
	}
	
	.p_Login_input2 {
		background: url(../../assets/login/锁.png)no-repeat 0 5px;
		background-size: 2rem 2rem;
		display: inline-block;
		width: 50%;
		padding-bottom: 3%;
		border-bottom: 1px solid #999;
	}
	
	.p_Login_input2 input {
		margin-top: 5%;
		margin-left: 30px;
		border: none;
		outline: none;
		width: 90%;
		height: 20px;
		color: #999;
	}
	
	.p_Login_yanzheng {
		margin-top: 5%;
		width: 40%;
		height: 40px;
		background-color: white;
		margin-left: 7%;
		border-radius: 20px;
		vertical-align: bottom;
		border: none;
		outline: none;
		border: 1px solid rgb(255, 129, 173);
		color: rgb(255, 129, 173);
	}
	
	.p_Login_xiayibu {
		margin-top: 8%;
		width: 100%;
		height: 50px;
		background-color: rgb(255, 129, 173);
		border-radius: 20px;
		border: none;
		outline: none;
		color: white;
		font-size: 2rem;
	}
	
	.p_Login_number {
		margin: 2rem auto;
		display: block;
		line-height: 3rem;
		font-size: 2rem;
		color: #999;
		display: none;
	}
	
	.p_Login_number em {
		color: #FF9A19;
	}
</style>